<template>
    <view>
        <u-popup :show="copupShow" mode="bottom" bgColor="transparent">
            <view class="tanchuang_box" style="background-image: url('https://morgan.dingxians.cn/static/payImg/11.png');">
                <view class="title_box" style="background-image: url('https://morgan.dingxians.cn/static/copup/5.png');"></view>
                <view class="close_guanbi_box" @click="closecopupPopup"
                    style="background-image: url('https://morgan.dingxians.cn/static/recordDrwa/3.png');">
                </view>
                <scroll-view scroll-y style="height: 800rpx;">
                    <view class="list_box" v-for="(item, index) in copupList" :key="index"
                        style="background-Image: url('https://morgan.dingxians.cn/static/copup/3.png')">
                        <view class="left_box">
                            <image src="https://morgan.dingxians.cn/static/copup/6.png" mode="scaleToFill" />
                        </view>
                        <view class="center_box">
                            <view class="top_one_bbox">满200-20优惠券</view>
                            <view class="top_two_bbox">有效期：领取后15天</view>
                            <view class="top_thr_bbox">适用范围：通用</view>
                        </view>
                        <view class="anniu_box" style="background-image: url('https://morgan.dingxians.cn/static/copup/2.png');"></view>
                    </view>
                </scroll-view>
            </view>
        </u-popup>

    </view>
</template>
<script>
export default {
    props: {
        copupShow: {
            type: Boolean,
            default: false,
        },
        copupList: {
            type: Array,
            default: [],
        },
    },
    methods: {
        copupPopup() {
            this.$emit('copupPopup')
        },
        closecopupPopup() {
            this.$emit('closecopupPopup')
        },
    }
}
</script>
<style lang="scss" scoped>
.tanchuang_box {
    width: 750rpx;
    height: 1000rpx;
    background-size: 100% 100%;
    box-sizing: border-box;
    padding-top: 29rpx;
    position: relative;

    .title_box {
        width: 402rpx;
        height: 66rpx;
        margin: auto;
        background-size: 100% 100%;
        margin-bottom: 40rpx;
    }

    .close_guanbi_box {
        width: 60rpx;
        height: 60rpx;
        background-size: 100% 100%;
        position: absolute;
        top: 36rpx;
        right: 20rpx;
    }

    .list_box {
        width: 690rpx;
        margin: auto;
        height: 210rpx;
        background-size: 100% 100%;
        padding: 35rpx 28rpx;
        box-sizing: border-box;
        display: flex;
        justify-content: flex-start;
        position: relative;
        margin-bottom: 168rpx;

        .left_box {
            width: 140rpx;
            height: 140rpx;
            background: #09040A;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-right: 20rpx;

            image {
                width: 120rpx;
                height: 103rpx;
            }
        }

        .center_box {
            height: 140rpx;
            box-sizing: border-box;
            padding-top: 7rpx;

            .top_one_bbox {
                height: 27rpx;
                font-family: PingFang SC;
                font-weight: 500;
                font-size: 28rpx;
                color: #FFFFFF;
                line-height: 27rpx;
                margin-bottom: 26rpx;
            }

            .top_two_bbox {
                height: 27rpx;
                font-family: PingFang SC;
                font-weight: 500;
                font-size: 28rpx;
                color: #FFFFFF;
                line-height: 27rpx;
                margin-bottom: 26rpx;
            }

            .top_thr_bbox {
                height: 27rpx;
                font-family: PingFang SC;
                font-weight: 500;
                font-size: 28rpx;
                color: #FFFFFF;
                line-height: 27rpx;
            }


        }

        .anniu_box {
            width: 150rpx;
            height: 80rpx;
            background-size: 100% 100%;
            position: absolute;
            right: 20rpx;
            bottom: 30rpx;
        }
    }
}
</style>